$(document).ready(function(){
	addCategories();
});


function addCategories()
{
	//recibe un json con categorias
	var categories = [{"title": "belleza"},{"title": "calzado"},{"title": "decohogar"},{"title": "deportes"},{"title": "dormitorio"},{"title": "electrohogar"},{"title": "infantil"},{"title": "moda"},{"title": "muebles"},{"title": "regalos"},{"title": "tecnologia"}];
	
	for(var i in categories)
	{
		var categorie = categories[i].title;		
		var column = smallerColumn();
		
		//$("#"+ column).append("<div class='" + categorie + "'></div>");
		//$("#"+ column).append("<div class='view view-sixth' style='margin-bottom:30px'><img src='img/categories/" + categorie + "_1.jpg'><div class='mask'><p>" + categorie + "</p></div></div>");
		$("#"+ column).append("<div class='view view-sixth " + categorie + "'><div class='mask'><p>" + categorie.toUpperCase() + "</p></div></div>");

	}
};

/** retorna la columna mas pequeña **/
function smallerColumn()
{
	var hCol1 = $("#col1").height();
	var hCol2 = $("#col2").height();
	var hCol3 = $("#col3").height();
	var hCol4 = $("#col4").height();
	
	var colMenor1 = lowerValue(hCol1, hCol2);
	var colMenor2 = lowerValue(hCol3, hCol4);	
	var hMenor = lowerValue(colMenor1, colMenor2);	
	
	for(var i = 1; i<=4; i++)
	{
		if($("#col" + i).height() == hMenor)
		{			
			return "col" + i;
		}
	}
};

function lowerValue(val1, val2)
{
	if(val1 == val2)
		return val1;
	else if(val1<val2)
		return val1;
	
	return val2;
}